/**
 * 使用html5 placeholder属性对功能进行优化
 * 使用html5标准标签即可 接受一个config的自定义属性json字符串
 * demo：
 * <input type="password" placeholder="请输入密码" id="password" config='{"left":5,"top":0}' />
 */
;(function($){
	var $holder = $('[placeholder ^=]');
	$holder.each(function(){
		var cfg = {},
			dft = {
				evtType  : 'keyup',
				color    : '#ccc', //默认颜色
				left     : 5,      //左偏移量
				top      : 0,      //上偏移量
				callback : function(){} //回调函数
			};
		var $input    = $(this),
			iptText   = $input.attr('placeholder'),
			iptId     = $input[0].id || '',
			iptLeft   = $input.offset().left,
			iptTop    = $input.offset().top,
			iptHeight = $input.outerHeight(),
			iptCfg    = $.parseJSON($input.attr('config'));
		$.extend(cfg, dft, iptCfg);
		var $label = $('<label class="p-placeholder">'+iptText+'</label>')
					 .attr('for', iptId)
					 .css({
					 	display    : 'block',
					 	color      : cfg.color,
					 	height     : iptHeight,
					 	lineHeight : iptHeight+'px',
					 	left       : iptLeft+(cfg.left-0),
					 	top        : iptTop+(cfg.top-0)
					 });
		$input.attr('placeholder','');
		$('body').append($label);
		
		if('keyup' === cfg.evtType){
			$input.on({
				keyup : function(){
					var _val = $.trim($input.val())
					iptText === _val && $input.val('');
					$label[('' !== _val)? 'hide':'show']();
					cfg.callback();
				}
			});
		}else if('focus' === cfg.evtType){
			$input.on({
				focus : function(){
					var _val = $.trim($input.val())
					iptText === _val && $input.val('');
					$label.hide();
					cfg.callback();
				}
			});
		};

		$input.on({
			blur : function(){
				var _val = $.trim($input.val())
				$input.val(_val);
				iptText === _val && $input.val('');
				$input.val() === '' && $label.show();
				cfg.callback();
			};
		});

		setInterval(function() {
			$input.val().length > 0 && $label.hide();
		}, 200);
		
	});

})(jQuery);